<template>
  <div class="strategy-container">
    <view class="cu-timeline">
      <view class="cu-item text-blue">
        <view class="bg-gradual-blue content" @click="NavChange(0)">
          <text>将CPU安装到主板上</text>
          <text class="cuIcon-unfold d smallicon"></text>
        </view>
        <view
          class="detail"
          :style="'height:' + [isShowFrom[0] ? height[0] + 'rpx' : '0']"
        >
          <view class="padding1"></view>
		  {{stepText[0].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/1-1.png"
          />
		  {{stepText[1].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/1-2.png"
          />
          <text
            >{{stepText[2].text}}</text
          >
          {{stepText[3].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/1-3.png"
          />
        </view>
      </view>
      <view class="cu-item text-blue">
        <view class="content bg-gradual-blue" @click="NavChange(1)">
          <text>CPU散热器安装</text>
          <text class="cuIcon-unfold d smallicon"></text>
        </view>
        <view
          class="detail"
          :style="'height:' + [isShowFrom[1] ? height[1] + 'rpx' : '0']"
        >
          <view class="padding1"></view>
          {{stepText[4].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/2-1.png"
          />
		  {{stepText[5].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/2-2.png"
          />
          {{stepText[6].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/2-3.png"
          />
          {{stepText[7].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/2-4.png"
          />
          <text
            >{{stepText[8].text}}</text
          >
          {{stepText[9].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/2-5.png"
          />
          {{stepText[10].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/2-6.png"
          />
          {{stepText[11].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/2-7.png"
          />
          {{stepText[12].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/2-8.png"
          />
          {{stepText[13].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/2-9.png"
          />
        </view>
      </view>
      <view class="cu-item text-blue">
        <view class="bg-gradual-blue content" @click="NavChange(2)">
          <text>内存条安装</text>
          <text class="cuIcon-unfold d smallicon"></text>
        </view>
        <view
          class="detail"
          :style="'height:' + [isShowFrom[2] ? height[2] + 'rpx' : '0']"
        >
          <view class="padding1"> </view>
          {{stepText[14].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/3-1.png"
          />
          {{stepText[15].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/3-2.png"
          />
          {{stepText[16].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/3-3.png"
          />
        </view>
      </view>
      <view class="cu-item text-blue">
        <view class="content bg-gradual-blue" @click="NavChange(3)">
          <text>将主板模块安装到机箱</text>
          <text class="cuIcon-unfold d smallicon"></text>
        </view>
        <view
          class="detail"
          :style="'height:' + [isShowFrom[3] ? height[3] + 'rpx' : '0']"
        >
          <view class="padding1"> </view>
          {{stepText[17].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/4-1.png"
          />
          {{stepText[18].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/4-2.png"
          />
          {{stepText[19].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/4-3.png"
          />
          {{stepText2[0].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/4-4.png"
          />
          {{stepText2[1].text}}
        </view>
      </view>
      <view class="cu-item text-blue">
        <view class="content bg-gradual-blue" @click="NavChange(4)">
          <text>显卡安装</text>
          <text class="cuIcon-unfold d smallicon"></text>
        </view>
        <view
          class="detail"
          :style="'height:' + [isShowFrom[4] ? height[4] + 'rpx' : '0']"
        >
          <view class="padding1"> </view>
          {{stepText2[2].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/5-1.png"
          />
          {{stepText2[3].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/5-2.png"
          />
          {{stepText2[4].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/5-3.png"
          />
          {{stepText2[5].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/5-4.png"
          />
        </view>
      </view>
      <view class="cu-item text-blue">
        <view class="content bg-gradual-blue" @click="NavChange(5)">
          <text>电源安装</text>
          <text class="cuIcon-unfold d smallicon"></text>
        </view>
        <view
          class="detail"
          :style="'height:' + [isShowFrom[5] ? height[5] + 'rpx' : '0']"
        >
          <view class="padding1"> </view>
          {{stepText2[6].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/6-1.png"
          />
          {{stepText2[7].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/6-2.png"
          />
          {{stepText2[8].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/6-3.png"
          />
        </view>
      </view>
      <view class="cu-item text-blue">
        <view class="content bg-gradual-blue" @click="NavChange(6)">
          <text>供电线路连接、跳线连接</text>
          <text class="cuIcon-unfold d smallicon"></text>
        </view>
        <view
          class="detail"
          :style="'height:' + [isShowFrom[6] ? height[6] + 'rpx' : '0']"
        >
          <view class="padding1"> </view>
          {{stepText2[9].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/7-1.png"
          />
          {{stepText2[10].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/7-2.png"
          />
          {{stepText2[11].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/7-3.png"
          />
          {{stepText2[12].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/7-4.png"
          />
          {{stepText2[13].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/7-5.png"
          />
          {{stepText2[14].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/7-6.png"
          />
          {{stepText2[15].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/7-7.png"
          />
          {{stepText2[16].text}}
        </view>
      </view>
      <view class="cu-item text-blue">
        <view class="content bg-gradual-blue" @click="NavChange(7)">
          <text>补充条线</text>
          <text class="cuIcon-unfold d smallicon"></text>
        </view>
        <view
          class="detail"
          :style="'height:' + [isShowFrom[7] ? height[7] + 'rpx' : '0']"
        >
          <view class="padding1"> </view>
          {{stepText2[17].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/8-4.png"
          />
          {{stepText2[18].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/8-1.png"
          />
          下来我们再接名称为HDD LED的硬盘指示灯跳线；
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/8-2.png"
          />
          {{stepText2[19].text}}
          <img
            src="cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/pics/8-3.png"
          />
        </view>
      </view>
    </view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showGroup: false,
      active: null,
      height: [2750, 6700, 2100, 3420, 2930, 1900, 5500, 2110],
      isShowFrom: [false, false, false, false, false, false, false, false],
	  stepText:[],
	  stepText2:[],
    };
  },
  methods: {
    NavChange: function (index) {
      //更改值使得页面数据刷新
      if (this.active == index) {
        this.showGroup = !this.showGroup;
      }
      if (this.active != index) {
        if (this.isShowFrom[this.active] == true) {
          this.isShowFrom[this.active] = !this.isShowFrom[this.active];
        }
        this.active = index;
      }
      this.isShowFrom[index] = !this.isShowFrom[index];
    },
  },
  onLoad() {
  	wx.cloud.database().collection('steps').where({}).get().then(res => {
  		this.stepText = res.data
  	})
	wx.cloud.database().collection('steps').where({}).skip(20).get().then(res => {
		this.stepText2 = res.data
	})
  	
  }
};
</script>

<style scoped>
.strategy-container {
  background-color: #fff;
}
.icon {
  position: absolute;
  top: 40upx;
  z-index: 9;
  width: 50upx;
  height: 50upx;
  border: none;
  left: 36upx;
}
.cu-item {
  border-radius: 12upx;
}
.content {
  padding: 10upx;
  width: 100%;
  font-size: 30upx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 600;
  border-radius: 12upx;
  background-color: #c3e9e0;
  color: #545454;
}

.smallicon {
  float: right;
  font-size: 34upx;
}

.padding1 {
  height: 32upx;
  background: #f8f8f8;
}

.detail {
  transition: height 0.45s ease-in-out;
  background: #f8f8f8;
  overflow: hidden;
  padding: 0 32upx;
  color: #666666;
  font-size: 28upx;
  line-height: 42upx;
  border-radius: 0 0 12upx 12upx;
  font-family: PingFangSC-Regular, PingFang SC;
}

.detail img {
  width: 100%;
  margin: 24upx 0;
  border-radius: 12upx;
}

.detail text {
  color: #e31d1a;
}

.beijing {
  height: 100vh;
  width: 100%;
  background-color: #ffffff;
  z-index: -1;
  position: absolute;
  top: 0;
}
</style>
